<template>
  <div class="payment_mod" :class="themeClass">
    <v-loading v-if="loading" />
    <v-nav :title="$t('PaymentMethod.Wallet list')" v-if="isDayTime === false" title_color="#fff" :class="themeClass"></v-nav>
    <v-nav :title="$t('PaymentMethod.Wallet list')" v-if="isDayTime === true"></v-nav>
    <div class="payment_mod_box" v-if="walletList.length != 0">
      <div class="payment_mod_box_list" v-for="(item, index) in walletList" :key="index">
        <div class="payment_mod_box_list_data">
          <img :src="item.currencies_logo" alt="" />
          <div>
            <p>
              <span>{{ $t('PaymentMethod.currency') }}:</span>
              <span class="color">{{ item.currency }}</span>
            </p>
            <p>
              <span>{{ $t('PaymentMethod.network') }}:</span>
              <span class="color">{{ item.currency_network }}</span>
            </p>
            <p>
              <span>{{ $t('PaymentMethod.address') }}:</span>
              <span class="color">{{ item.currency_address }}</span>
            </p>
            <p>
              <span>{{ $t('PaymentMethod.time') }}:</span>
              <span class="color">{{ item.create_time }}</span>
            </p>
          </div>
          <img :src="item.currency_qr" alt="" />
          <van-button round size="small" type="danger" icon="delete" @click="deleteAddress(item.id)" />
        </div>
      </div>
    </div>
    <van-empty v-else :description="$t('info.info7')" />
    <div class="moomoo-bottom" v-if="walletList.length < 5">
      <div class="moomoo-bottom-submit">
        <van-button color="#DAAB51" round block @click="submit">{{ $t('PaymentMethod.Add wallet address') }}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PaymentMethod',
  data() {
    return {
      routerParams: {},
      walletList: [],
      isDayTime: false,
      loading: false
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  activated() {
    this.getWalletr()
  },
  methods: {
    async getWalletr() {
      this.loading = true
      await this.$https.get('/wallet/allWalletAddress').then(res => {
        if (res != undefined && res.code == 1) {
          this.walletList = res.data
        }
      })
      this.loading = false
    },
    deleteAddress(address_id) {
      this.$dialog
        .confirm({
          title: this.$t('info.info8'),
          confirmButtonText: this.$t('info.info10'),
          cancelButtonText: this.$t('info.info11'),
          confirmButtonColor: 'rgb(218, 171, 81)',
          cancelButtonColor: 'rgb(218, 171, 81)',
          theme: 'round-button'
        })
        .then(() => {
          this.$https.post('/wallet/deleteWalletAddress', { address_id: address_id }).then(res => {
            if (res != undefined && res.code == 1) {
              this.getWalletr()
            }
          })
        })
        .catch(() => {})
    },
    submit() {
      this.$router.push({
        path: '/asset/walletaddress'
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
